<%@ page language="java" pageEncoding="UTF-8" %>
	<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

		<!DOCTYPE html>
		<html>

		<head>
			<title>后台管理</title>
			<base href="${pageContext.request.contextPath}/">
			<meta charset="utf-8" />
			<link rel="stylesheet" href="css/admin.css" />
			<script src="/js//jquery-3.6.0.js"></script>
			<script src="/layer/layer.js"></script>
			<style>
				.highlightTd {
					background-color: rgb(224, 230, 230);
					line-height: 40px;
				}
			</style>
			<!--调序功能-->
			<script type="text/javascript">
				var moveStart = false; //是否开始移动
				var curTr; //待移动的tr
				var tarTr; //目标tr

				$(function () {
					//鼠标按下
					$("#list_table").find("tr").find("td:not(:last)").mousedown(function () {
						moveStart = true;
						curTr = $(this).parent();
						curTr.find("td").addClass("highlightTd");
						curTr.addClass("pointer");
					});
					//鼠标移入
					$("#list_table").find("tr").mouseover(function () {
						var ch = "input[type='checkbox']";
						if (moveStart == true && curTr.find(ch).val() != $(this).find(ch).val()) {
							if (curTr.offset().top > $(this).offset().top) { //上移
								tarTr = $(this);
								tarTr.focus();
								tarTr.before(curTr);
							}
							else { //下移
								tarTr = $(this);
								tarTr.focus();
								tarTr.after(curTr);
							}
						}
					});
					//鼠标移出
					$("#list_table").find("tr").mouseup(function () {
						console.log("**************")
						console.log(moveStart)
						if (moveStart == true) {
							moveStart = false;
							curTr.find("td").removeClass("highlightTd");
							curTr.removeClass("pointer");

							var subjectIds = ""; //存储ID集合
							$("#list_table").find("input[type='checkbox'][id!='checkAll']").each(function () {
								subjectIds += $(this).val() + ",";
							});
							console.log(subjectIds)
							if (subjectIds != "") {
								console.log("**************")
								console.log(subjectIds.substr(0, subjectIds.length - 1))
								//Ajax请求保存数据
								$.ajax({
									type: "POST",
									url: "/admin/category?opr=sort",
									data: "subjectIds=" + subjectIds.substr(0, subjectIds.length - 1), //传参
									dataType: "json",
									beforeSend: function (r) {
										//加载层-默认风格
										layer.load(1);
									},
									success: function (data) {
										window.location.reload();
										console.log(data);
										if (data.msg == 'ok') {
											layer.msg("修改成功", { icon: 1 });
										} else {
											layer.msg("系统繁忙请稍后再试", { icon: 2 });
										}
									},
									complete: function (XMLHttpRequest, textStatus) {
										// alert('远程调用成功，状态文本值：'+textStatus);
										layer.closeAll('loading');
									},

									error: function () {
										layer.msg("系统繁忙请稍后再试", { icon: 2 });
									}
								});
							}
						}
					});
				});
			</script>


		</head>

		<body>
			<div class="container">
				<div id="header">
					<jsp:include page="header.jsp"></jsp:include>
				</div>
				<div id="admin_left">
					<ul class="submenu">
						<jsp:include page="left.jsp"></jsp:include>
					</ul>
					<div id="copyright"></div>
				</div>
				<div id="admin_right" style="height: 640px;">
					<div class="headbar">
						<div class="field">
							<table class="list_table">
								<col width="100px" />
								<col width="100px" />
								<col width="300px" />
								<col width="100px" />
								<col width="100px" />
								<col width="100px" />
								<thead>
									<tr>
										<th><input type="checkbox" class="checkbox" id="cAll" /><label for="cAll">
												全选</label> </th>
										<th>序号</th>
										<th>名称</th>
										<th>是否导航</th>
										<th>是否已删除</th>
										<th>操作
										</th>
									</tr>

									</tr>
								</thead>
							</table>
						</div>
					</div>

					<div class="content">
						<table id="list_table" class="list_table" onselectstart="javascript:return false;">
							<col width="100px" />
							<col width="100px" />
							<col width="300px" />
							<col width="100px" />
							<col width="100px" />
							<col width="100px" />
							<tbody>
								<c:forEach items="${categoryList}" var="category">

									<c:if test="${category.state==1}">
										<tr align="center"
											style="line-height: 30px; border-bottom: 1px solid rgb(98, 97, 97); border-right: 1px solid rgb(98, 97, 97);border-left: 1px solid rgb(98, 97, 97);"
											onMouseOver="this.style.backgroundColor='#E0FFFF'"
											onMouseOut="this.style.backgroundColor='#FFFFFF'">
									</c:if>
									<c:if test="${category.state==-1}">
										<tr align="center"
											style="line-height: 30px; border-bottom: 1px solid rgb(98, 97, 97); border-right: 1px solid rgb(98, 97, 97);border-left: 1px solid rgb(98, 97, 97);opacity: 0.5;"
											onMouseOver="this.style.backgroundColor='#FFDAB9'"
											onMouseOut="this.style.backgroundColor='#FFFFFF'">
									</c:if>
									<td id="tdcheck">
										<input type="checkbox" value="${category.id}" class="checkbox" name="checkbox"
											id="checkbox" />
									</td>
									<td>${category.sort}</td>

									<td>
										<c:if test="${category.state==-1}"><del></c:if>${category.categoryName}</del>
									</td>
									<c:if test="${category.isDisplay==1}">
										<td>✔</td>
									</c:if>
									<c:if test="${category.isDisplay==-1}">
										<td style="color: rgb(207, 55, 21);font-weight: 600;"></td>
									</c:if>
									<c:if test="${category.state==-1}">
										<td style="color: rgb(207, 55, 21);font-weight: 600;">✔</td>
									</c:if>
									<c:if test="${category.state==1}">
										<td></td>
									</c:if>
									<td><a href="javascript:void(0)"><img class="operator" data-cid="${category.id}"
												src="images/admin/bj.png" alt="编辑" title="编辑" id="updateBtn"
												onmouseover="this.style.width='18px',this.style.height='18px'"
												onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>

										<c:if test="${category.state==1}">
											<a href="javascript:void(0)"><img class="operator" src="images/admin/sc.png"
													alt="删除" id="delBtn" title="删除" data-cid="${category.id}"
													data-display="${category.isDisplay}"
													onmouseover="this.style.width='18px',this.style.height='18px'"
													onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
										</c:if>

										<c:if test="${category.state==-1}">
											<a href="javascript:void(0)"><img class="operator" src="images/admin/hf.png"
													alt="恢复" id="resBtn" title="恢复" data-cid="${category.id}"
													data-display="${category.isDisplay}"
													onmouseover="this.style.width='18px',this.style.height='18px'"
													onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
										</c:if>

										<c:if test="${category.isDisplay==1}">
											<a href="javascript:void(0)"><img class="operator"
													src="images/admin/jy1.png" alt="屏蔽" id="shieldBtn" title="屏蔽"
													data-cid="${category.id}" data-del="${category.state}"
													onmouseover="this.style.width='18px',this.style.height='18px'"
													onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
										</c:if>

										<c:if test="${category.isDisplay==-1}">
											<a href="javascript:void(0)"><img class="operator" src="images/admin/hy.png"
													alt="显示" id="displayBtn" title="显示" data-cid="${category.id}"
													data-del="${category.state}"
													onmouseover="this.style.width='18px',this.style.height='18px'"
													onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
										</c:if>
										<!-- <img class="operator" src="images/admin/sxjt.png"
											alt="移动"  title="移动" 
											onmouseover="this.style.width='18px',this.style.height='18px'"
											onMouseOut="this.style.width='13px',this.style.height='13px'" />  -->
									</td>
								</c:forEach>
							</tbody>
						</table>
						<input type="submit" class="submit" value="删除所选" style="font-size: 8px;padding: 3px"
							id="delAll" />&nbsp;
						<input type="submit" class="submit" value="屏蔽所选" style="font-size: 8px;padding:3px"
							id="shieldAll" />&nbsp;&nbsp;
						<input type="button" class="submit" value="添加分类" style="font-size: 8px;padding: 3px"
							id="addcategory" />&nbsp;&nbsp;
					</div>
					<!-- 修改分类弹窗代码开始  -->
					<div class="web_notice" id="msgdiv"
						style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;text-align: left;">
						<div id="msg"
							style="position: fixed;top: 50%;left: 50%;width: 550px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
							<form action="admin/category?opr=update" method="post" id="updateSubmit">
								<h3 style="font-weight: bold;text-align: center;font-size: 30px;margin-top: -20px;"
									id="upTitle">
									修改类别信息</h3>
								<div style="font-size: 18px;">
									<input type="hidden" id="cid" name="cid" value="1">
									<span>名 &nbsp;&nbsp;称：</span> <input type="text" value="" placeholder="请输入类别名"
										style="margin-top: 20px;padding: 5px;" id="updateText" name="name"><span
										id="updatemsgname" style="font-size: 8px;">&nbsp;&nbsp; * 必填项</span><br>

									<span>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>
									<input type="checkbox" name="display" style="margin-top: 20px;" value="1"
										id="isDisplay">
									<label for="isDisplay">是否导航</label><br>
									<input type="checkbox" value="-1" id="isDel" name="isDel"
										style="margin-left: 94px;"> <label for="isDel">是否已删除</label>
								</div>

								<div
									style="font-size: 16px;margin-top: 26px;line-height: 30px;color: rgb(149, 67, 67); text-align: center;font-weight: 600;">
									<a href="javascript:void(0)" onclick="updateFromSubmit()"
										style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 80px;margin-top: 60px;border-radius: 32px;width: 20%;">确定</a>
									<a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 340px;margin-top: -60px;border-radius: 32px;width: 20%;cursor: pointer;"
										onclick="nomsgDiv()">取消</a>
								</div>
							</form>
						</div>
					</div>
					<!-- 弹窗代码结束  -->


					<!-- 添加分类弹窗代码开始  -->
					<div class="web_notice" id="adddiv"
						style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;text-align: left;">
						<div id="add"
							style="position: fixed;top: 50%;left: 50%;width: 550px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
							<form action="admin/category?opr=add" method="post" id="addSubmit">
								<h3 style="font-weight: bold;text-align: center;font-size: 30px;margin-top: -20px;"
									id="upTitle">
									添加类别信息</h3>
								<div style="font-size: 18px;">
									<input type="hidden" id="cid" name="cid" value="1">
									<span>名 &nbsp;&nbsp;称：</span> <input type="text" value="" placeholder="请输入类别名"
										style="margin-top: 20px;padding: 5px;" id="addText" name="name"><span
										id="addmsgname" style="font-size: 8px;">&nbsp;&nbsp; * 必填项</span><br>

									<span>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>
									<input type="checkbox" name="display" style="margin-top: 20px;" value="1"
										id="isDisplay">
									<label for="isDisplay">是否导航</label><br>
									<!-- <input type="checkbox" value="-1" id="isDel" name="isDel"
										style="margin-left: 94px;"> <label for="isDel">是否已删除：</label> -->
								</div>

								<div
									style="font-size: 16px;margin-top: 26px;line-height: 30px;color: rgb(149, 67, 67); text-align: center;font-weight: 600;">
									<a href="javascript:void(0)" onclick="addFromSubmit()"
										style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 80px;margin-top: 60px;border-radius: 32px;width: 20%;">确定</a>
									<a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 340px;margin-top: -60px;border-radius: 32px;width: 20%;cursor: pointer;"
										onclick="nomsgDivAdd()">取消</a>
								</div>
							</form>
						</div>
					</div>
					<!-- 弹窗代码结束  -->
				</div>
				<div id="separator"></div>
			</div>
		</body>
		<style>
			#msg,
			#msgdiv,
			#adddiv,
			#add {
				display: none;
			}

			/* 弹窗动画 */
			#msg,
			#add {
				-webkit-animation: fadeleftIn .4s;
				animation: fadeleftIn .4s;
				-webkit-animation-name: popIn;
				animation-name: popIn;
			}

			@-webkit-keyframes popIn {
				0% {
					-webkit-transform: scale3d(0, 0, 0);
					transform: scale3d(0.5, 0.5, 0.5);
					opacity: 0;
				}

				50% {
					-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
					animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
				}

				100% {
					-webkit-transform: scale3d(1, 1, 1);
					transform: scale3d(1, 1, 1);
					-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					opacity: 1;
				}
			}

			@keyframes popIn {
				0% {
					-webkit-transform: scale3d(0, 0, 0);
					transform: scale3d(0.5, 0.5, 0.5);
					opacity: 0;
				}

				50% {
					-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
					animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
				}

				100% {
					/* -webkit-transform: scale3d(1, 1, 1); */
					/* transform: scale3d(1, 1, 1); */
					-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					opacity: 1;
				}
			}
		</style>


		<script>
			window.addEventListener("load", function () {
				document.getElementById("admin_right").addEventListener("click", function (e) {
					if (e.target.id === "updateBtn") {
						// ajax异步请求刷新
						var xmlhttp = new XMLHttpRequest();
						xmlhttp.onreadystatechange = function (result) {
							if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
								var c = JSON.parse(xmlhttp.responseText)
								document.getElementById("updateText").value = c.name;
								if (c.isDel === -1) {
									document.getElementById("isDel").checked = true;
								} else if (c.isDisplay === 1) {
									document.getElementById("isDisplay").checked = true;
								}
								document.getElementById("cid").value = c.id;
							}
						}
						// true开启异步刷新
						xmlhttp.open("GET", "admin/category?opr=updateSelect&id=" + e.target.getAttribute("data-cid"), true);
						xmlhttp.send();
						show();
					} else if (e.target.id === "resBtn") { // 还原按钮点击事件
						location.href = "admin/category?opr=update&isDel=1&display=" + e.target.getAttribute("data-display") + "&cid=" + e.target.getAttribute("data-cid");
					} else if (e.target.id === "delBtn") { // 删除按钮点击事件
						layer.confirm('您确定删除吗？', {
							btn: ['确定', '取消'] //按钮
						}, function () {
							location.href = "admin/category?opr=update&isDel=-1&display=" + e.target.getAttribute("data-display") + "&cid=" + e.target.getAttribute("data-cid");
						}, function () {
							layer.closeAll('dialog');
						});

					} else if (e.target.id === "shieldBtn") { // 屏蔽按钮点击事件
						location.href = "admin/category?opr=update&display=-1&isDel=" + e.target.getAttribute("data-del") + "&cid=" + e.target.getAttribute("data-cid");
					} else if (e.target.id === "displayBtn") { // 显示按钮点击事件
						location.href = "admin/category?opr=update&display=1&isDel=" + e.target.getAttribute("data-del") + "&cid=" + e.target.getAttribute("data-cid");
					} else if (e.target.id === "cAll") { // 点击全选
						let allCheckedBox = document.getElementsByName("checkbox"); // 获取所有选择框
						let allChecked = document.getElementById("cAll");
						for (let checked of allCheckedBox) {
							checked.checked = allChecked.checked;
						}
					} else if (e.target.id == "checkbox") {// 半选
						e.stopPropagation();
						let allCheckedBox = document.getElementsByName("checkbox"); // 获取所有选择框
						let allChecked = document.getElementById("cAll");
						let num = 0;
						for (let i = 0; i < allCheckedBox.length; i++) {
							if (allCheckedBox[i].checked) {
								num++;
								if (num == allCheckedBox.length) {
									document.getElementById("cAll").indeterminate = false;// 修改半选
									document.getElementById("cAll").checked = true;// 修改全选
								} else if (num > 0 && num < allCheckedBox.length) {
									// document.getElementById("allChecked").checked = false;// 修改全选
									document.getElementById("cAll").indeterminate = true; // 修改全选为半选
								} else {
									document.getElementById("cAll").indeterminate = false;// 修改半选
									document.getElementById("cAll").checked = false;// 修改全选
								}
							}
						}
					} else if (e.target.id == "delAll") {// 删除所选
						layer.confirm('您确定删除吗？', {
							btn: ['确定', '取消'] //按钮
						}, function () {
							let allCheckedBox = document.getElementsByName("checkbox"); // 获取所有选择框
							let ids = "";
							for (let checked of allCheckedBox) {
								if (checked.checked) {
									ids = ids + "&ids=" + checked.value
								}
							}
							location.href = "admin/category?opr=del" + ids;
						}, function () {
							layer.closeAll('dialog');
						});
					} else if (e.target.id == "shieldAll") {// 屏蔽所选
						let allCheckedBox = document.getElementsByName("checkbox"); // 获取所有选择框
						let ids = "";
						for (let checked of allCheckedBox) {
							if (checked.checked) {
								ids = ids + "&ids=" + checked.value
							}
						}
						location.href = "admin/category?opr=shield" + ids;
					}


				});
			})
		</script>
		<script>

			// 记录验证通过数
			var uplist = new Array();
			uplist[0] = 1;
			uplist[1] = 1;
			$(function () {
				$("#updateText").blur(function () {
					// ajax异步请求刷新
					var xmlhttp = new XMLHttpRequest();
					xmlhttp.onreadystatechange = function (result) {
						if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {

							if (xmlhttp.responseText != 'ok') {
								uplist[0] = 1;
								console.log(xmlhttp.responseText)
								$("#updatemsgname").text(xmlhttp.responseText);
								$("#updatemsgname").prop("style").color = "red";
								$("#updateText").css({
									background: "rgb(235, 175, 159)"
								})
							} else {
								uplist[0] = 0;
								$("#updatemsgname").text("验证通过");
								$("#updatemsgname").prop("style").color = "green";
								$("#updateText").css({
									background: "rgb(191, 255, 234)"
								})
							}
						}
					}
					// true开启异步刷新
					xmlhttp.open("GET", "admin/category?opr=check&name=" + this.value, true);
					xmlhttp.send();

				})
			})


			function show() {
				document.getElementById("msg").style.display = "block";
				document.getElementById("msgdiv").style.display = "block";
				$("#updatemsgname").text("* 必填项");
			}
			function nomsgDiv() {
				document.getElementById("msg").style.display = "none";
				document.getElementById("msgdiv").style.display = "none";
				document.getElementById("updatemsgname").innerText = "* 必填项";
			}
			// 修改
			function updateFromSubmit() {
				// if (list[0] == 1) {
				// 	layer.msg('验证未通过', function () {
				// 		//关闭后的操作
				// 	});
				// } else {
				let datas = {
					opr: "update",
					name: $("#updateText").val(),
					display: $("#isDisplay:checked").val(),
					isDel: $("#isDel:checked").val(),
					cid: $("#cid").val()
				}
				$.ajax({
					type: "post",
					url: "admin/category",
					data: datas,
					dataType: "json",
					success: function (result) {
						if (result.msg == 'ok') {
							location.href = "admin/category?opr=select";
							layer.msg('修改成功', { icon: 1 });
						} else {
							layer.msg(result.msg, { icon: 2 });
						}
					},
					error: function () {
						layer.msg('系统繁忙，请稍后再试', { icon: 2 });
					}
				})
				// }

				// document.getElementById("updateSubmit").submit();
			}
		</script>

		<script>

			// 记录验证通过数
			var list = new Array();
			list[0] = 1;
			$(function () {
				$("#addcategory").click(function () {
					showAdd();
				})
				$("#addText").blur(function () {
					// ajax异步请求刷新
					var xmlhttp = new XMLHttpRequest();
					xmlhttp.onreadystatechange = function (result) {
						if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {

							if (xmlhttp.responseText != 'ok') {
								list[0] = 1;
								console.log(xmlhttp.responseText)
								$("#addmsgname").text(xmlhttp.responseText);
								$("#addmsgname").prop("style").color = "red";
								$("#addText").css({
									background: "rgb(235, 175, 159)"
								})
							} else {
								list[0] = 0;
								$("#addmsgname").text("验证通过");
								$("#addmsgname").prop("style").color = "green";
								$("#addText").css({
									background: "rgb(191, 255, 234)"
								})
							}
						}
					}
					// true开启异步刷新
					xmlhttp.open("GET", "admin/category?opr=check&name=" + this.value, true);
					xmlhttp.send();

				})
			})

			function showAdd() {
				document.getElementById("add").style.display = "block";
				document.getElementById("adddiv").style.display = "block";
				$("#addmsgname").text("* 必填项");
			}
			function nomsgDivAdd() {
				document.getElementById("add").style.display = "none";
				document.getElementById("adddiv").style.display = "none";
				document.getElementById("addmsgname").innerText = "* 必填项";
			}
			// 新增
			function addFromSubmit() {
				if (list[0] == 1) {
					layer.msg('验证未通过', function () {
						//关闭后的操作
					});
				} else {
					let datas = {
						opr: "add",
						name: $("#addText").val(),
						display: $("#isDisplay:checked").val()
					}
					$.ajax({
						type: "post",
						url: "admin/category",
						data: datas,
						dataType: "json",
						success: function (result) {
							if (result.msg == 'ok') {
								location.href = "admin/category?opr=select";
								layer.msg('添加成功', { icon: 1 });

							} else {
								layer.msg(result.msg, { icon: 2 });
							}
						},
						error: function () {
							layer.msg('系统繁忙，请稍后再试', { icon: 2 });
						}
					})
				}
			}
		</script>

		</html>